<template>
    <div class="box">
        <img src="../../assets/1.png" alt="" srcset="" style="width: 100%;">
        <van-cell-group>
            <van-cell title="店铺名称" />
            <van-cell style="height: 10rem;">
                <div class="box1">
                    <img src="../../assets/bg.png" alt="" srcset=""
                        style="width: 6rem;height: 6rem; border-radius: 1rem;">
                    <span>华为Mate60Pro</span>
                    <span>白色的</span>
                    <span style="color: orange;">￥20.10 x3</span>
                    <span >待支付</span>
                </div>
            </van-cell>
        </van-cell-group>
        <van-cell-group>
            <van-cell title="优惠券" value="无可用优惠券" />
            <van-cell title="店铺优惠" value="无"  />
        </van-cell-group>
        <van-cell-group>
            <van-cell title="商品金额" value="￥60.30000000000004" />
            <van-cell title="优惠金额" value="0"  />
            <van-cell title="运费" value="免运费"  />
            <van-cell title="备注" >
                123123
            </van-cell>
        </van-cell-group>
        <van-submit-bar :price="price*100" button-text="提交订单" @submit="onSubmit"  style="margin-top: 6rem;"/>

    </div>
</template>

<script setup>
import { ref } from 'vue';
import { datePickerProps, showToast } from 'vant';
import { payApi } from '@/api/api';
import router from '@/router';
let price = 60.30
const onSubmit = () =>{
    let obj = {
        orderId:1,
        subject:111,
        totalPrice:price,
    }
    payApi(obj).then((res)=>{
        console.log(res)
        if(res.data.code == 0){
        router.push(res.data.msg)
    }
    })
}
</script>

<style lang="scss" scoped>
.box {
    background: #eee;

    .box1 {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .van-cell-group{
        margin-top: 2rem;
    }
}
</style>